@import "../../style/public";
.index-page {
  .zhk-sys{
    color:#fff;
  }
  .today-data {
    @include remCalc(height, 300);
    @include remCalc(margin-bottom, 114);
    @include remCalc(padding, 0, 30);
    //background: linear-gradient(314deg, rgba(10, 141, 254, 0.82) 0%, rgba(73, 75, 255, 0.82) 100%), url(../../../static/images/today_bg.png) bottom right no-repeat;
    background: linear-gradient(250deg, rgba(10,141,254,0.82) 8%, rgba(73,75,255,0.82) 100%), url(../../../static/images/today_bg.png) bottom right no-repeat;
    background-size: contain;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.25);
    .title {
      @include remCalc(padding, 12, 0, 18, 0);
      @include remCalc(font-size, 32);
      color: #ffffff;
    }
    .shishou {
      color: #fff;
      @include remCalc(line-height, 100);
      @include remCalc(padding-bottom, 10);
      .fh {
        @include remCalc(font-size, 48);
        @include remCalc(bottom, 4);
        position: relative;
      }
      span {
        @include remCalc(font-size, 72);
      }
    }
    .details-wrap {
      @include remCalc(height, 180);
      @include remCalc(padding, 0, 15);
      box-sizing: border-box;
      background: #fdfdfd;
      box-shadow: 0 12px 16px 0 rgba(85, 125, 253, 0.2);
      @include remCalc(border-radius, 10);
      .top {
        @include remCalc(height, 105);
        display: flex;
        > div {
          flex: 1;
          @include remCalc(padding-left, 60);
          display: flex;
          align-items: center;
          span {
            @include remCalc(font-size, 32);
            color: #333;
          }
          i {
            color: #459dff;
            @include remCalc(font-size, 28);
            @include remCalc(padding, 0, 4, 0, 8);
            font-style: normal;
          }
          > div {
            @include remCalc(font-size, 32);
            font-weight: bold;
            color: #459dff;
          }
        }
        .left {
          position: relative;
          white-space: nowrap;
          &::before {
            content: "";
            position: absolute;
            @include remCalc(height, 48);
            background: #ddd;
            width: 1px;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
      .update-time {
        border-top: 1px solid #ddd;
        @include remCalc(font-size, 24);
        color: #999;
        text-align: center;
        @include remCalc(line-height, 75);
      }
    }
  }
  .link-box {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    @include remCalc(margin-bottom, 20);
    box-shadow: 0 -1px 0 0 rgba(221,221,221,0.50), 0 1px 0 0 rgba(221,221,221,0.50);
    @include remCalc(padding, 0, 30);
    &.no-split{
      >li{
        border-bottom: 1px solid transparent !important;
      }
    }
    > li {
      box-sizing: border-box;
      width: 50%;
      @include remCalc(height, 120);
      position: relative;
      &:first-child {
        border-bottom: 1px solid #ddd;
      }
      &:nth-child(2) {
        border-bottom: 1px solid #ddd;
      }
      &:nth-child(2n) {
        @include remCalc(padding-left, 30);
        i {
          right: 0;
        }
        &::before {
          content: "";
          position: absolute;
          @include remCalc(height, 80);
          background: #ddd;
          width: 1px;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      i {
        position: absolute;
        @include remCalc(right, 30);
        top: 50%;
        transform: translateY(-50%);
        @include remCalc(font-size, 64);
        color: #459dff;
      }
      .title {
        @include remCalc(padding, 20, 0, 12, 0);
        @include remCalc(font-size, 30);
        color: #333;
      }
      .desc {
        @include remCalc(font-size, 24);
        color: #999;
      }
    }
  }
  .notify{
    @include remCalc(height, 60);
    @include remCalc(line-height, 60);
    @include remCalc(margin-bottom, 20);
    @include remCalc(padding, 0,30);
    background: #FFEDE4;
    box-shadow: 0 1px 0 0 rgba(221,221,221,0.50), 0 -1px 0 0 rgba(221,221,221,0.50);
    overflow: hidden;
    color: #FE7B3E;
 
    .zhk-bf-svg{
      @include remCalc(font-size, 28);
      @include remCalc(margin-top, 16);
      float: left;
    }
    .ct{
      @include remCalc(padding-left, 10);
      @include remCalc(font-size, 24);
      float: left;
    }
    .zhk-list_rarrow{
      float:right;
      @include remCalc(margin-top, 16);
      @include remCalc(font-size, 28);
    }
    
  }
  .mall-enter {
    @include thin-border(true);
    @include remCalc(height, 120);
    @include remCalc(margin-bottom, 20);
    background:#fff url(../../../static/images/mall_enter.png) 0 0 no-repeat;
    @include remCalc( background-size, 198,110);
    position: relative;
    .title {
      @include remCalc(font-size, 32);
      position: absolute;
      @include remCalc(left, 216);
      @include remCalc(top, 20);
      color: #333;
    }
    .content {
      @include remCalc(font-size, 24);
      @include remCalc(line-height, 50);
      position: absolute;
      @include remCalc(left, 216);
      @include remCalc(top, 60);
      color: #999;
    }
    .link-to{
      position: absolute;
      @include remCalc(right, 30);
      @include remCalc(top, 40);
      @include remCalc(font-size, 24);
      color:$color-red;
      @include remCalc(border-radius, 100);
      @include remCalc(line-height, 40);
      @include remCalc(padding, 0,24);
      border:1px solid $color-red;
      display: inline-block;

    }
  }
  .diagnose {
    @include remCalc(padding-left, 30);
    @include remCalc(margin-bottom, 20);
    @extend %translate3d;
    background: #fff;
    .title {
      @include remCalc(line-height, 88);
      @include remCalc(font-size, 30);
      color: #333;
      border-bottom: 1px solid $color-border;
    }
    .have-create-activity {
      .warning {
        @extend %flex;
        @include remCalc(width, 650);
        @include remCalc(min-height, 66);
        @include remCalc(margin-top, 30);
        @include remCalc(padding, 12, 20);
        background: #f8f5f0;
        .icon {
          @include remCalc(width, 60);
          @include remCalc(height, 60);
          @include remCalc(line-height, 60);
          @include remCalc(font-size, 46);
          border-radius: 50%;
          text-align: center;
          color: #fff;
        }
        .warning-content {
          @include remCalc(margin-left, 20);
          @include remCalc(font-size, 26);
          @include remCalc(line-height, 34);
          @extend %flex-item;
          color: #fda97b;
        }
      }
      .little-title {
        @include remCalc(line-height, 88);
        @include remCalc(font-size, 28);
        color: #333;
      }
      .activity-list {
        @include remCalc(margin-left, -30);
        @include remCalc(padding, 0, 15);
        li {
          width: 25%;
          float: left;

          dl {
            @include remCalc(padding-bottom, 12);
            dt {
              text-align: center;
              img {
                @include remCalc(width, 150);
                @include remCalc(height, 150);
                @include remCalc(border-radius, 6);
                overflow: hidden;
              }
            }
            dd {
              text-align: center;
              color: #333333;
              @include remCalc(min-height, 64);
              @include remCalc(font-size, 24);
              @include remCalc(line-height, 64);
            }
          }
        }
      }
    }
    .no-create-activity {
      @include remCalc(padding, 30, 0, 25, 0);

      .top {
        @extend %flex;
        .icon {
          @include remCalc(width, 62);
          @include remCalc(height, 62);
          @include remCalc(line-height, 62);
          @include remCalc(font-size, 56);
          border-radius: 50%;
          text-align: center;
          background: #ff801a;
          color: #fff;
          display: inline-block;
        }
        .info {
          @extend %flex-item;
          @include remCalc(margin-left, 20);
          @include remCalc(font-size, 28);
          @include remCalc(line-height, 62);
          color: #333;
          .num {
            font-style: normal;
            @include remCalc(font-size, 36);
            color: #ff801a;
          }
        }
      }
      .bottom {
        text-align: center;
        a {
          @include remCalc(font-size, 28);
          @include remCalc(line-height, 28);
          color: #508cee;
          i {
            @include remCalc(font-size, 30);
            position: relative;
            @include remCalc(top, 2);
            @include remCalc(left, 6);
          }
        }
      }
    }
  }
  .tendency {
    @include remCalc(padding-left, 30);
    @include remCalc(margin-bottom, 30);
    @extend %translate3d;
    background: #fff;
    .title {
      @include remCalc(line-height, 88);
      @include remCalc(font-size, 30);
      color: #333333;
      border-bottom: 1px solid $color-border;
    }
    .echart-box {
      @include remCalc(min-height, 466);
      @include remCalc(padding, 30, 30, 30, 0);
      @extend %translate3d;
    }
  }
  .banner {
    @include remCalc(width, 750);
    @include remCalc(margin-bottom, 30);
    @include remCalc(margin-top, 30);
  }
}
